<template>
  <div>
    <div> 1. 当前时间: {{ currentTime }} //时间戳</div>
    <br>
    <div> 2. 转为时分秒:(1217:) {{ 1217 | formateSeconds }}  <!--  // 将秒 处理为 时分秒格式 (例如 1217 ->00:20:17)-->
    </div>
    <br>
    <div> 3. 将节目时长处理为HH:MM:SS格式(1217:) {{ dataTime }}</div>
    <br>
    <div> 4. 将时间戳转为日期格式, 年-月-日 时:分:秒:毫秒  {{ timeNow }}</div>
    <el-button @click="add" v-loading.fullscreen.lock="fullscreenLoading">点击</el-button>
    <el-button @click="confirm1">点击弹窗</el-button>
    <a-table
      :columns="columns"
      :data-source="data1"
      :row-selection="rowSelection"
      :expanded-row-keys.sync="expandedRowKeys"
    />
    <el-button @click="deleteSelect">删除</el-button>
    <video style="height:400px;width:400px" controls>
      <source src="../assets/video/2.mp4"  type="video/mp4">
    </video>
    <video style="height:400px;width:400px" controls>
      <source src="../assets/video/3.mp4" type="video/mp4">
    </video>
     <!--左侧音频-->
     <audio 
        ref="audioRef1"
        class="bgMusic"
        controls
        @pause="onPause1"
        @play="onPlay1"
    >
      <source src="../assets/audio/广播.wav" type="audio/mpeg">
    </audio>
    <!-- 右侧音频 -->
     <audio
        ref="audioRef2"
        class="bgMusic"
        controls
        @pause="onPause2"
        @play="onPlay2"
    >
      <source src="../assets/audio/test.mp3" type="audio/mpeg">
    </audio>
  </div>

</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '12%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '30%',
    key: 'address',
  },
];

import yuTool from "@/utils/yuTool";
import { parseTime } from "@/utils/time.js";
import moment from "moment";
import { MessageBox } from "element-ui";
export default {
  filters: {
    // 秒--> 时分秒格式转化
    formateSeconds(secondTime) {
      return yuTool.formateSec(secondTime)
    }
  },
  data() {
    return {
      timer:null,
      num:0,
      value3:'',
      timePickerOption: {
        disabledDate(time) {
            const dateTime = new Date();
            const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
            return time.getTime() < new Date(startDateTime).getTime();
        },
        selectableRange:
            parseTime(new Date(moment().format("YYYY-MM-DD HH:mm:ss")), "{hh}:{ii}:{ss}" ) + "- 23:59:00",
      },
      fullscreenLoading: false,
      currentTime: '',    //当前时间
      dataTime: '',    //将节目时长处理为HH:MM:SS格式
      timeNow:'',      //将时间戳转为日期格式, 年-月-日 时:分:秒:毫秒
      data1: [
        {
          key: 1,
          name: 'John Brown sr.',
          age: 60,
          address: 'New York No. 1 Lake Park',
          children: [
            {
              key: 11,
              name: 'John Brown',
              age: 42,
              address: 'New York No. 2 Lake Park',
            },
            {
              key: 12,
              name: 'John Brown jr.',
              age: 30,
              address: 'New York No. 3 Lake Park',
              children: [
                {
                  key: 121,
                  name: 'Jimmy Brown',
                  age: 16,
                  address: 'New York No. 3 Lake Park',
                },
              ],
            },
            {
              key: 13,
              name: 'Jim Green sr.',
              age: 72,
              address: 'London No. 1 Lake Park',
              children: [
                {
                  key: 131,
                  name: 'Jim Green',
                  age: 42,
                  address: 'London No. 2 Lake Park',
                  children: [
                    {
                      key: 1311,
                      name: 'Jim Green jr.',
                      age: 25,
                      address: 'London No. 3 Lake Park',
                    },
                    {
                      key: 1312,
                      name: 'Jimmy Green sr.',
                      age: 18,
                      address: 'London No. 4 Lake Park',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          key: 2,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      columns,
      ids:[],//id的合集
      rowSelection: { 
        // 监听选中
        onChange: (selectedRowKeys, selectedRows) => {
          this.ids = []
          selectedRows.forEach(item=>{
            this.ids.push(item.key)
          })
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          setTimeout(()=>{
            this.ids = []
            this.data1.forEach(item=>{
              this.ids.push(item.key)
            })
          })
        },
      },
      expandedRowKeys: [],
    }

  },
  mounted() {
    this.getCurrentTime();
    this.getDealTime();
    this.gettimeNow()
    this.add()
  },
  methods: {
    // 左侧音频播放回调
    onPlay1(){
      this.$refs.audioRef2.pause()
      // 点击播放先取消定时器
      clearTimeout(this.timer)
      // 第一次点击播放可以设置时间段
      if(this.num==0){
        // 全局控制timer随时取消定时器
        this.timer = setTimeout(()=>{
          this.$refs.audioRef1.pause()
        },5000)
      }
      this.num++
    },
    // 左侧音频暂停回调
    onPause1(){
    },
    // 右侧音频播放回调
    onPlay2(){
      this.$refs.audioRef1.pause()
    },
    // 右侧音频暂停回调
    onPause2(){
    },
    deleteSelect(){
      // this.ids.forEach(item=>{
      //   let id = this.data1.findIndex(item1=>item1.key == item.key)
      //   this.data1.splice(id,1)
      // })
      console.log(this.ids)

    },
    confirm1(){
      // this.$confirm(v=>{

      // })
      MessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: 'custom-message-box',
        type: "warning",
      })
    },
    add(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(()=>{
        loading.close();
      },1000)
    },
    getCurrentTime: function () {
      this.currentTime = Date.now();
    },
    getDealTime() {
      this.dataTime = yuTool.dealMin(1217)
    },
    gettimeNow(){
      this.timeNow = yuTool.parseTime(new Date().getTime())
    }


  }

}

</script>
<style lang="less">
  .el-message-box__wrapper{
    .el-message-box{
      border: none;
    }
    .el-message-box__header{
      background: black;
    }
    .el-message-box__title{
      span{
        color: white;
      }
    }
    .el-message-box__btns{
      &>:nth-child(1){
        background-color: #3f5263;
        border-color: #3f5263;
        color: white;
      }
      &>:nth-child(2){
        background-color: #4caa98;
        border-color: #4caa98;
      }
    }
  }
</style>

<style scoped lang="less">
.test{
  width: 800px;
  height: 400px;
  display: flex;
  &>div{
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 100%;
  }
  &>:nth-child(1){
    flex: 8;
  }
  &>:nth-child(2){
    flex: 8;
  }
  &>:nth-child(3){
    flex: 2;
  }

}
/deep/ .ant-table-tbody > tr.ant-table-row-selected td{
  background: black;
}
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
  background: black;
}
/deep/ .ant-table-tbody > tr > td{
  background: black;
}
</style>
